<template>
  <el-row class="template-c-u-page">

    <el-row class="page-main">
      <div class="sheet-form">
        <el-form
          class="m7-form form"
          size="mini"
          label-position="top"
          :model="form"
          ref="form"
          @submit.native.prevent
        >
          <span />
        </el-form>
      </div>

      <div class="footer">
        <el-button
          icon="el-icon-finished"
          size="mini"
          type="primary"
          @click.stop="submit"
        >保 存</el-button>
        <slot name="button"></slot>
      </div>
    </el-row>
  </el-row>
</template>

<script lang="ts">

import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
// eslint-disable-next-line no-unused-vars
import { Form } from 'element-ui'
@Component({
  name: 'detailRecord',
  components: {
  }
})

export default class extends Vue {
  @Prop({ default: () => [] }) public sheetFieldList!: any[]
  @Ref() public widgetArr!: any

  // 表单内容是否发生改变
  private $route: any
  public form = {}
  public showFieldList: any[] = []
  private get fieldsMap () {
    const obj = {}
    const sheetFieldList = this.sheetFieldList
    sheetFieldList.forEach((item) => {
      obj[item.businessId] = item
    })
    // console.log('fieldsMap:\n', obj)
    return obj
  }

  private created () {
    // console.log('c_u created', this.sheetFieldList)
  }

  public initForm (data?: any) {
    this.form = {}
    this.showFieldList = []
    this.$nextTick(() => {
      const { showFieldList } = this.getFieldList(this.sheetFieldList)
      this.showFieldList = showFieldList
      this.showFieldList.forEach((item) => {
        let value: string | any[] | undefined
        this.$set(this.form, item.businessId, value)
      })
    })
    setTimeout(() => {
      (this.$refs.form as Form).clearValidate()
    })
  }

  private getFieldList (sheetFieldList) {
    const showFieldList: any[] = []
    sheetFieldList.forEach((item) => {
      showFieldList.push(item)
    })
    return { showFieldList }
  }

  private submit () {
    const formRef = this.$refs.form as Form
    // console.log('this.form\n', this.form)
    this.$nextTick(() => {
      formRef.validate(async (valid) => {
        if (valid) {
          const data = {}
          this.widgetArr.forEach((one) => {
            const businessId = one.item.businessId
            // console.log('businessId\n', businessId)
            if (['phone', 'wechat', 'email'].includes(one.item.fieldType)) {
              // console.log('this.form[businessId]:\n', this.form[businessId + '_arr'])
              for (let i = 0; i < this.form[businessId + '_arr'].length; i++) {
                const e = this.form[businessId + '_arr'][i]
                if (e.defaultValue === '' && e.defaultValue === '') {
                  this.form[businessId + '_arr'].splice(i--, 1)
                }
              }
              this.form[businessId + '_arr'][0].defaultValue = this.form[businessId]
              data[businessId] = this.form[businessId + '_arr']
            } else {
              data[businessId] = this.form[businessId]
            }
          })
          let res: any = {}
          // region 测试数据现状
          const test = {}
          for (const e in data) {
            test[this.sheetFieldList.find(v => v.businessId === e).name] = data[e]
          }
          console.log('form chinese test obj:\n', test)
          // endregion
          // 新增、编辑
          if (!this.$route.query._id) {
            res = await this.addRecord(data)
            console.log('addRecord:\n', res)
          } else {
            res = await this.updateRecord(data)
            console.log('updateRecord:\n', res)
          }
        }
      })
    })
  }

  private async addRecord (data) {
    return data
  }

  private async updateRecord (data) {
    return data
  }

  private mounted () {
    // console.log('c_u mounted', this.sheetFieldList)
    // this.initForm()
  }
}
</script>

<style lang="stylus" scoped>
  .template-c-u-page
    height 100%
  .page-main
    width 100%
    height 100%
    overflow hidden
    .sheet-form
      height calc(100% - 32px)
      overflow-y auto
      overflow-x hidden
      .form
        padding 0px 0
        display flex
        flex-wrap wrap
        justify-content space-between
        & >>> .el-form-item__label
          padding 06
    .footer
      text-align right
</style>
